<template>
  <div class="about">
    <ul>
        <li v-for="(item,index) in list" :key="index" :class="{active:check == item}" @click="checkFtn(item)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      list:['2000以内','2000-3000','3000-5000','5000-8000'],
      check: '',
      goods:[{price: 1000},{price: 2100},{price: 3200},{price: 4500},{price: 7500}]
    })
    const checkFtn = (val) => {
       data.check = data.check == val?'':val
       let arr = null;
       if (data.check == ''){
           return
       }
       if (data.check == '2000以内'){
          arr = data.goods.filter(item => item.price<=2000)
       } else {
           let str = data.check.split('-');
           arr = data.goods.filter(item => item.price<=str[1]*1 && item.price>=str[0]*1)
       }
       
       console.log(arr);
    }
    return{
      ...toRefs(data),
      checkFtn
    }
  },
};
</script>
<style lang="scss" scoped>
.active{
  color: red;
}
</style>